import React from 'react'
// ===================================================================== Temp
import TableModal from '#cpt/temp/TableModal'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Title = $Lazy.load(()=>import('#tp/title/title'))
const Button = $Lazy.load(()=>import('@antd/button'))
const Table = $Lazy.load(()=>import('@antd/table'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		selectedKeys:[],
		selectedKeys2: [],
		selectedRows: [],
		price: '0.00',
		forms : [
			{ label: '物价名称',		name: 'item_name',	width:200 },
			{ label: '物价代码',		name: 'price_code',	width:200 },
		]
	}
	
	model = {}
	
	componentDidMount(){
		
	}
	
	// paging
	fetch = callback => {
		const { project_id } = $fn.getCenterQuery()
		window.$http.pull(this,'qt-item-source/chargeSelect', { param:{ project_id }, pullLoading:'pagingLoading' }).then(data=>{
			callback?.()
		})
	}
	// 打开弹窗并传递参数
	open = rows => {
		this.modal.open()
		const { data } = this.state
		
		if(!$fn.hasArray(data)){
			this.fetch(()=>{
				this.backShow(rows)
			})
		}else{
			this.backShow(rows)
			this.table.resize()
		}
	}
	// 回显
	backShow = selectedRows => {
		if($fn.hasArray(selectedRows)){
			this.setState(()=>{
				const selectedKeys = selectedRows.map(v => v.uuid)
				return { selectedKeys, selectedRows, price: this.getPrice(selectedRows) }
			})
		}
	}
	
	// 表单
	cols = [
		{ title: '名称', 		dataIndex: 'item_name', width:'50%'},
		{ title: '物价代码', 	dataIndex: 'price_code'},
		{ title: '参考价', 		dataIndex: 'price' },
	]
	
	cols2 = [
		...this.cols,
		{ title: '操作', 		width:60, render: (text, {uuid}) => <Button label='删除' onClick={()=>this.onDel([uuid])} /> },
	]
	
	controls = ()=>{
		const { selectedKeys2 } = this.state
		return [
			Controls.click.call(this,'删除', () => {
				this.onDel(selectedKeys2)
			}, {disabled: !$fn.hasArray(selectedKeys2)})
		]
	}
	
	// 删除
	onDel = delKeys => {
		const { selectedRows } = this.state
		let rows = $fn.copy(selectedRows)
		
		rows.forEach( (v,i) =>{
			delKeys.forEach( m => {
				if(v.uuid === m){
					rows[i] = null
				}
			} )
		})
		rows = rows.filter(v => v !== null)
		
		const keys = rows.map( v => v.uuid)
		
		this.setState({ selectedRows : rows, selectedKeys: keys,  selectedKeys2: [], price: this.getPrice(rows) })
	}
	// 计算价格
	getPrice = selectedRows =>{
		const price = selectedRows.reduce((total,value) => total + +value.price, 0)
		return  price.toFixed(2)
	}
	
	render(){
		const { selectedRows, selectedKeys2, price } = this.state
		return (
			<>
				{
					TableModal.call(this,{ title: '收费选择', width:'60%', height:'99%', noRefresh:true,
						bodyStyle:{padding:'0 10px 0'},
						table:{ 
							simple:true,
							selectedRows: selectedRows,
							onSelect: (selectedKeys, selectedRows) => {
								this.setState({ selectedKeys, selectedRows, price:this.getPrice(selectedRows), selectedKeys2: [] })
							}
						},
						prefix: <Title title='物价列表' />,
						close: ()=> {
							this.setState({ selectedKeys:[], selectedRows:[],  selectedKeys2: [] })
						},
						suffix: (
							<>
								<Title title='已选物价' className='mb10' controls={this.controls()} />
								<Table 
									type			= 'checkbox'
									data 			= { selectedRows }
									cols 			= { this.cols2}
									wrapClassName 	= 'mlr'
									selectedKeys	= { selectedKeys2 }
									simple
									onSelect		= { selectedKeys => this.setState({ selectedKeys2: selectedKeys })}
								/>
								<dl className='fxm h30 f14 tc tbor1'>
									<dt className='ex rbor1'>总计</dt>
									<dd className='ex b' style={{color:'red'}}>{price}</dd>
								</dl>
							</>
						),
						onOk : ()=> {
							this.modal.close()
							this.props?.onSelect(price, selectedRows)
						}
					})
				}
			</>
		)
	}
}

export default Index